<template>
  <view class="home">
    <!-- 头部标题栏 -->
    <view class="homeBar">
      <view class="homeBarItem">
        <view class="honeBarImgCity">
          <view class="homeBarImg">
            <image src="http://localhost:3000/static/1_03.png" mode=""></image>
          </view>
          <view class="homeBarCity" @click="goCity">
            <text>{{city}}</text>
            <image src="http://localhost:3000/static/a12.png" mode=""></image>
          </view>
        </view>
        <view class="homeBarSearch">
          <image src="http://localhost:3000/static/sousuo.png" mode=""></image>
        </view>
      </view>
    </view>


    <!-- 轮播图区域 -->
    <view class="homeBanner" v-for="(item,i) in swiperList" :key="i">
      <swiper :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item>
          <image :src="item.banner_img" mode=""></image>
        </swiper-item>
      </swiper>
      <view class="homeBannerInfo" @click="goGoodSaf">
        <text>{{item.banner_left}}</text>
        <text>{{item.banner_center}}</text>
        <text>{{item.banner_right}}</text>
      </view>
    </view>

    <view class="container">
      <!-- 本期新品区域 -->
      <view class="newGoods">
        <view class="title" @click="goNewGoods">本期新品</view>
        <scroll-view scroll-x="true">
          <view class="scrollItem" v-for="(item,i) in newGoodsList" :key="i">
            <view class="goodsImage">
              <image :src="item.url" mode=""></image>
            </view>
            <view class="goodsTitle">{{item.uname}}</view>
            <view class="goodsInfo">{{item.intro}}</view>
            <view class="goodsPrice">￥{{item.price}}</view>
          </view>
        </scroll-view>
      </view>

      <!-- 生活家搭配区域 -->
      <view class="liveHome">
        <view class="liveHomeHeader">
          <view class="title">生活家搭配</view>
          <view class="lookAll">查看全部</view>
        </view>
        <view class="liveHomeWrap">
          <view class="liveHomeBanner" v-for="(item,i) in liveHomeList" :key="i">
            <view class="liveHomeImage">
              <image :src="item.goods_img" mode=""></image>
            </view>
            <scroll-view scroll-x="true">
              <view class="scrollItem" v-for="(item2,i2) in item.children" :key="i2">
                <view class="goodsImage">
                  <image :src="item2.goods_img" mode=""></image>
                </view>
                <view class="goodsTitle">{{item2.goods_name}}</view>
                <view class="goodsPrice">￥{{item2.goods_price}}</view>
              </view>
            </scroll-view>
            <view class="grayLong"></view>
          </view>
        </view>
      </view>

      <!-- 热门推荐区域 -->
      <view class="hostPush">
        <view class="title">热门推荐</view>
        <view class="hostPushWrap">
          <view class="hostPushBox" v-for="(item,i) in hotPushList.data" :key="i">
            <view class="niceGoodsIcon">
              <image :src="hotPushList.goods_icon" mode=""></image>
            </view>
            <view class="hostPushImage">
              <image :src="item.goods_img" mode=""></image>
            </view>
            <view class="niceGoodsTitle">
              <text class="xianhuo">{{item.goods_status}}</text>
              <text class="goodsTitle">{{item.goods_name}}</text>
            </view>
            <view class="goodsInfo">{{item.good_msg}}</view>
            <view class="goodsPrice">￥{{item.goods_price}}</view>
            <view class="guige">
              <text>{{item.goods_text}}</text>
              <text>{{item.goods_text1}}</text>
              <text>{{item.goods_text2}}</text>
            </view>

          </view>
        </view>
      </view>


    </view>

  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'

  export default {
    mixins: [badgeMix],
    data() {
      return {
        swiperList: [], //轮播图数组
        newGoodsList: [], //本期新品数组
        liveHomeList: [], //生活家搭配数组
        hotPushList: [], //热门推荐数组
        city: '郑州'
      };
    },
    onLoad(options) {
      this.getSwiperList()
      this.getNewGoodsList()
      this.getLiveHomeList()
      this.getHotPushList()
      // console.log(options);
      this.city = options.city
    },
    onReady() {
      uni.removeStorageSync('token')
    },
    methods: {

      // 请求轮播图数据
      async getSwiperList() {
        const {
          data: res
        } = await uni.$http.get('/banner')
        this.swiperList = res.data
      },
      // 请求本期新品数据
      async getNewGoodsList() {
        const {
          data: res
        } = await uni.$http.get('/new')
        this.newGoodsList = res.data
      },
      // 请求生活家搭配数据
      async getLiveHomeList() {
        const {
          data: res
        } = await uni.$http.get('/liveHome')
        this.liveHomeList = res.data
      },
      // 请求热门推荐数据
      async getHotPushList() {
        const {
          data: res
        } = await uni.$http.get('/hot')
        this.hotPushList = res
      },
      // 跳转城市页面
      goCity() {
        uni.navigateTo({
          url: '/subpkg/city_list/city_list?city=' + this.city
        })
      },
      // 跳转保障页面
      goGoodSaf() {
        uni.navigateTo({
          url: '/subpkg/baozhang/baozhang'
        })
      },
      // 跳转本期新品页面
      goNewGoods() {
        uni.navigateTo({
          url: '/subpkg/new_goods/new_goods'
        })

      }
    }
  }
</script>

<style lang="scss">
  .homeBar {
    width: 100%;
    height: 130rpx;
    position: relative;

    // background-color: plum;
    .homeBarItem {
      width: 100%;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      padding: 60rpx 20rpx 0;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;

      .honeBarImgCity {
        display: flex;

        .homeBarImg {
          image {
            width: 86rpx;
            height: 84rpx;
          }
        }

        .homeBarCity {
          font-size: 24rpx;
          line-height: 84rpx;

          text {
            margin: 0 10rpx;
          }

          image {
            width: 19rpx;
            height: 10rpx;
          }
        }
      }
    }
  }

  .homeBarSearch image {
    width: 32rpx;
    height: 32rpx;
    margin-top: 20rpx;
  }

  .homeBanner swiper-item image {
    width: 100%;
  }

  .homeBannerInfo {
    padding: 18rpx 20rpx 40rpx;
    font-size: 20rpx;
    color: #8a94a1;
    display: flex;
    justify-content: space-between;
  }

  .container {
    padding: 0 20rpx;
  }

  //本期新品区域
  .newGoods .title {
    font-weight: bold;
    margin-bottom: 24rpx;
  }

  scroll-view {
    width: 100%;
    display: flex;
    white-space: nowrap;
  }

  .newGoods scroll-view .scrollItem {
    display: inline-block;
    width: 230rpx;
    margin-right: 10rpx;
  }

  .newGoods scroll-view .scrollItem .goodsImage image {
    width: 230rpx;
    height: 184rpx;
  }

  .newGoods scroll-view .scrollItem .goodsTitle {
    font-size: 22rpx;
    margin: 10rpx 0 12rpx;
  }

  .newGoods scroll-view .scrollItem .goodsInfo {
    font-size: 16rpx;
  }

  .newGoods scroll-view .scrollItem .goodsPrice {
    color: red;
    font-size: 18rpx;
    margin: 10rpx 0 24rpx;
  }

  // 生活家搭配区域
  .liveHomeHeader {
    margin: 40rpx 0;
    display: flex;
    justify-content: space-between;
  }

  .liveHomeHeader .title {
    font-weight: bold;

  }

  .liveHomeHeader .lookAll {
    color: #8a94a1;
    font-size: 22rpx;
  }

  .liveHomeWrap {

    // padding-top: 40rpx;
    .liveHomeBanner {
      .liveHomeImage {
        image {
          width: 100%;
          height: 398rpx;
        }
      }

      scroll-view {
        width: 100%;

        .scrollItem {
          display: inline-block;
          margin: 28rpx 11rpx 0 0;

          .goodsImage {
            image {
              width: 230rpx;
              height: 184rpx;
            }
          }

          .goodsTitle {
            margin: 10rpx 0;
            color: #232e3d;
            font-size: 22rpx;
          }

          .goodsPrice {
            color: red;
            font-size: 20rpx;
          }
        }
      }

      .grayLong {
        margin: 24rpx 0 40rpx;
        width: 100%;
        height: 20rpx;
        background-color: #f2f3f7;
      }
    }
  }

  // 热门推荐数组
  .hostPush {
    .title {
      font-weight: bold;
    }

    .hostPushWrap {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin: 20rpx 0 0;

      .hostPushBox {
        border: 1rpx solid #fbfbfc;
        margin-bottom: 20rpx;

        .niceGoodsIcon {
          image {
            width: 47rpx;
            height: 47rpx;
            margin-bottom: 20rpx;
          }
        }

        .hostPushImage {
          image {
            width: 263rpx;
            height: 199rpx;
          }
        }

        .niceGoodsTitle {
          .xianhuo {
            background-color: #232e3d;
            color: #fff;
            font-size: 19rpx;
            border-radius: 10rpx;
            margin-right: 10rpx;
            line-height: 22rpx;
            padding: 0 2rpx 2rpx;
          }

          .goodsTitle {
            font-size: 24rpx;
          }
        }

        .goodsInfo {
          width: 262rpx;
          font-size: 20rpx;
          color: #8a9431;
          margin: 8rpx 0;

        }

        .goodsPrice {
          color: red;
          font-size: 24rpx;
        }

        .guige {
          margin: 20rpx 0 40rpx;
          display: flex;
          justify-content: space-between;

          text {
            background-color: #232e3d;
            color: #fff;
            font-size: 19rpx;
            border-radius: 10rpx;
            line-height: 26rpx;
            padding: 0 2rpx;
          }
        }
      }
    }
  }
</style>
